<template>
    <div class="big_wrap">
        <div id="chart" style="width: 300px; height: 300px" class="chart"></div>
        <div class="timeline">
            <div class="choosetime">
                <div>
                    <el-date-picker v-model="choosetime" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" size="large ">
                    </el-date-picker>
                </div>
                <div class="queren">
                    <el-button type="primary" @click="toQueren" size="large ">确认</el-button>
                </div>
            </div>

            <!--滑块组件-->
            <!-- <div class="bottom">
              <el-slider v-model="getpercent" :format-tooltip="formatSlider" :max="sliderAllLength" @change="sliderChangeOver"></el-slider>
          </div> -->

            <!-- 自定义时间轴 -->
            <div class="bottom_line">
                <div id="drawline" @mousedown="moveTime">
                    <!-- <span class="one-1" style="display: inline-block; width: 3px; height: 50px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-1"  style="display: inline-block; width: 2px; height: 50px; background: black;" ></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
              <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
              <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span> -->
                </div>
                <el-tooltip class="item" effect="dark" content="currentTime" placement="top">
                    <img src="../assets/img/时间轴定位.png" alt="" class="positionJianTou">
                </el-tooltip>
            </div>




            <!-- <div class="bottom_line" id="drawline2" style="margin-top:3px">
          </div> -->

        </div>

    </div>
</template>

<script>
import * as echarts from "echarts";
var dayjs = require("dayjs");

export default {
    name: "index",
    data() {
        return {

            choosetime: [
                dayjs(new Date().getTime() - 3600 * 1000 * 1).format(
                    "YYYY-MM-DD HH:mm:ss"
                ),
                new Date(),
            ],
        };
    },
    beforeDestroy() {
        clearInterval(this.Interval);
    },
    mounted() {
        // this.init("2022-08-21 00:00:00", "2022-08-22 00:00:00",3);
        // 画时间轴刻度线

        // $("#drawline")
        //   .append(`<span class="one-1" style="display: inline-block; width: 3px; height: 50px; background: black;"></span>
        //             <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
        //             <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
        //             <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
        //             <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
        //             <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
        //             <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
        //             <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
        //             <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
        //             <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
        //             <span class="one-6"  style="display: inline-block; width: 2px; height: 50px; background: black;" ></span>
        //             <span class="one-1-1" style=" display: inline-block; width: 3px; height: 2px; background: black;"></span>
        //             <span class="one-2" style="display: inline-block; width: 2px; height: 30px; background: black;"></span>
        //             `);
        for (let i = 0; i < 66; i++) {
            $("#drawline").append(`<span class="one-1"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>

              `)
        }





        // $("#drawline").append(`<span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         <span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         <span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         <span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         `);

        // $("#drawline").append(`<span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         <span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         <span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         <span class="one-1"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>
        //         <span class="one-2"></span>
        //         <span class="one-1-1"></span>

        //         `);


        $("#drawline").trigger('create')

        // 画仪表盘
        var chart = document.getElementById("chart");
        var myChart = echarts.init(chart);
        var { width, height } = getComputedStyle(chart);
        // 计算出中心点位置
        var x = parseInt(width.slice(0, -2), 0) / 2;
        var y = parseInt(height.slice(0, -2), 0) / 2;
        console.log(x, y, "xy的值");

        var minAngle = 0; //最小角度
        var maxAngle = 180; //最大角度
        var maxValue = 10; //最大值
        // var maxValue = -50;  //最小值
        var dataRatio = maxValue / maxAngle;
        var option = {
            animation: false, // 关掉动画, 否则拖动会有延迟
            series: [
                {
                    name: "业务指标",
                    type: "gauge",
                    // min: -50,
                    max: 10,
                    // startAngle: maxAngle,
                    // endAngle: minAngle,
                    detail: { formatter: "xx{value}" },
                    data: [{ value: 1, name: "速率" }],
                },
            ],
        };

        myChart.setOption(option);

        function changeValue(event) {
            // console.log(event,"event")
            var x2 = event.offsetX;
            var y2 = event.offsetY;
            // 当前点击位置的角度.
            var currentAngle = (Math.atan2(y - y2, x - x2) * 180) / Math.PI;
            console.log(currentAngle, "当前点击位置的角度");
            // 边界处理
            if (currentAngle < minAngle || currentAngle > maxAngle) {
                let _angle = Math.abs(currentAngle);
                console.log(_angle, " _angle");
                if (_angle > 90) {
                    currentAngle = maxAngle;
                } else {
                    currentAngle = minAngle;
                }
            }

            // 转换回数据值, 这里就是实际的值, 默认保留2位小数.
            let value = (currentAngle * dataRatio).toFixed(0);
            option.series[0].data[0].value = value;
            myChart.setOption(option);
        }

        // 这里使用 zrender 的事件监听可以监听到画布的所有鼠标事件.
        myChart._zr.on("mousedown", function (event) {
            changeValue(event);
            myChart._zr.on("mousemove", changeValue);
        });
        myChart._zr.on("mouseup", function (event) {
            myChart._zr.off("mousemove", changeValue);
        });
    },
    methods: {
        //确认按钮
        toQueren() {
            // console.log(new Date(this.choosetime[1]).getTime());
            // console.log(new Date(this.choosetime[0]).getTime());

            let choosetime1 = dayjs(new Date(this.choosetime[0]).getTime()).format(
                "YYYY-MM-DD HH:mm:ss"
            ); // 选中的开始时间
            let choosetime2 = dayjs(new Date(this.choosetime[1]).getTime()).format(
                "YYYY-MM-DD HH:mm:ss"
            ); // 选中的结束时间

            let geziNumber = Math.ceil((new Date(this.choosetime[1]).getTime() - new Date(this.choosetime[0]).getTime()) / 1000 / 60)
            var drawline = document.getElementById("drawline");
            console.log(drawline.innerHTML, "drawline.innerHTML")
            drawline.innerHTML = ""
            console.log(drawline.innerHTML, "drawline.innerHTML1211")
            for (let j = 0; j < geziNumber; j++) {
                $("#drawline").append(`<span class="one-1"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span>
              <span class="one-1-1"></span>
              <span class="one-2"></span> 
              <span class="one-1-1"></span>

              `)
            }
            console.log(drawline.innerHTML, "drawline.innerHTML333")
            // console.log(shijianchou, "shijianchou");
            console.log(new Date(this.choosetime[1]).getTime(), new Date(this.choosetime[1]).getTime(), "shijianchou--");
            console.log(choosetime1, choosetime2, "当前选择时间范围");
        },

        // 移动时间轴事件
         


    },
};
</script>
<style lang="scss" >
.big_wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100vw;
    height: 300px;

    .chart {
        width: 300px;
    }

    .timeline {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;

        .choosetime {
            height: 50px;
            display: flex;
            padding: 4% 1% 3% 1%;

            .queren {
                margin-left: 3%;
            }
        }

        .bottom {}

        .bottom_line {
            margin-top: 60px;
            position: absolute;
            left: 0px;
            bottom: 80px;
            height: 40px;
            width: 95%;
            // width: 18%;
            //   background: rgba(41, 24, 226, 0.15);
            background: radial-gradient(circle, #409eff, #79bbff, #a0cfff);
            // background: radial-gradient(circle, rgba(107, 94, 254, 0.35), rgba(71, 124, 148, 0.24), rgba(30, 55, 139, 0.35));
            padding: 25px 5px 5px 5px;
            font-size: 0;
            border: 1px solid #7eadde;
            border-radius: 8px;
            white-space: nowrap; // 不换行
            overflow: hidden; //超出隐藏

            // overflow-x: scroll; //生成横向滚动条
            position: relative;


            .positionJianTou {
                // z-index: 999;
                width: 20px;
                height: 20px;
                position: absolute;
                left: 50%;
                top: 0;
            }

            .one-1 {
                display: inline-block;
                width: 2px;
                height: 40px;
                background: black;
            }

            //   .one-6 {
            //     display: inline-block;
            //     width: 2px;
            //     height: 50px;
            //     background: black;
            //   }

            .one-1-1 {
                display: inline-block;
                width: 3px;
                height: 2px;
                background: black;
            }

            .one-2 {
                display: inline-block;
                width: 2px;
                height: 30px;
                background: black;
            }
        }


    }
}
</style>
